<template>
  <el-card>
    <!-- 查询 -->
    <el-form :model="queryParams" inline label-width="80px" class="search-form">
      <el-form-item label="姓名">
        <el-select v-model="queryParams.name" clearable placeholder="请选择姓名" style="width: 150px">
          <el-option label="全部" value=""/>
          <el-option v-for="v in allNameOpts" :key="v" :label="v" :value="v"/>
        </el-select>
      </el-form-item>

      <el-form-item label="部门">
        <el-select v-model="queryParams.deptName" clearable placeholder="请选择部门" style="width: 150px">
          <el-option label="全部" value=""/>
          <el-option v-for="v in allDeptOpts" :key="v" :label="v" :value="v"/>
        </el-select>
      </el-form-item>

      <el-form-item label="科室">
        <el-select v-model="queryParams.roomName" clearable placeholder="请选择科室" style="width: 150px">
          <el-option label="全部" value=""/>
          <el-option v-for="v in allRoomOpts" :key="v" :label="v" :value="v"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
        <el-button type="success" @click="handleAdd">新增员工</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :data="tableData" border stripe style="width: 100%; margin:12px 0">
      <el-table-column prop="id" label="ID" width="60"/>
      <el-table-column prop="staffNo" label="账号"/>
      <el-table-column prop="name" label="姓名"/>
      <el-table-column label="性别" width="60">
        <template #default="{row}">{{ row.gender===1?'男':'女' }}</template>
      </el-table-column>
      <el-table-column prop="phone" label="电话"/>
      <el-table-column prop="email" label="邮箱"/>

      <!-- 新增三列 -->
      <el-table-column prop="price" label="挂号价格" width="100">
        <template #default="{row}">¥{{ row.price }}</template>
      </el-table-column>
      <el-table-column prop="salary" label="月薪" width="100">
        <template #default="{row}">¥{{ row.salary }}</template>
      </el-table-column>
      <el-table-column prop="profile" label="简介" min-width="160" show-overflow-tooltip/>

      <el-table-column prop="deptName" label="部门"/>
      <el-table-column prop="roomName" label="科室">
        <template #default="{row}">{{ row.roomName||'无' }}</template>
      </el-table-column>
      <el-table-column prop="title" label="职位"/>
      <el-table-column prop="roleName" label="角色" width="120"/>
      <el-table-column label="状态" width="70">
        <template #default="{row}">
          <el-tag :type="row.status === 1 ? 'success' : 'danger'" effect="light">
            {{ row.status === 1 ? '在职' : '离职' }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="入职时间" width="160">
        <template #default="{row}">{{ row.startTime }}</template>
      </el-table-column>
      <el-table-column label="操作" width="150">
        <template #default="{row}">
          <el-button size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDel(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        :page-size="pagination.pageSize"
        :current-page="pagination.pageNum"
        :page-sizes="[5, 10, 20, 50]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>
  </el-card>

  <!-- 新增/编辑弹窗 -->
  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="600px">
    <el-form :model="form" ref="formRef" label-width="90px" :rules="formRules">
      <el-row :gutter="12">
        <el-col :span="12">
          <el-form-item label="账号" prop="staffNo">
            <el-input v-model="form.staffNo" placeholder="请输入账号"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名"/>
          </el-form-item>
        </el-col>

        <!-- 密码 -->
        <el-col :span="12">
          <el-form-item label="密码" prop="password">
            <el-input v-model="form.password" type="password" show-password
                      :placeholder="isAdd ? '请输入密码' : '留空不修改'"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model="form.confirmPassword" type="password" show-password
                      :placeholder="isAdd ? '请确认密码' : '留空不修改'"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="form.gender">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="电话" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入电话"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" placeholder="请输入邮箱"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门" prop="deptName">
            <el-select v-model="form.deptName" clearable placeholder="请选择部门" style="width:100%">
              <el-option v-for="v in allDeptOpts" :key="v" :label="v" :value="v"/>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="科室" prop="roomName">
            <el-select v-model="form.roomName" clearable placeholder="请选择科室" style="width:100%">
              <el-option label="无" value=""/>
              <el-option v-for="v in allRoomOpts" :key="v" :label="v" :value="v"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="职位" prop="title">
            <el-select v-model="form.title" clearable placeholder="请选择职位" style="width:100%">
              <el-option v-for="v in allTitleOpts" :key="v" :label="v" :value="v"/>
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 新增角色字段 -->
        <el-col :span="12">
          <el-form-item label="角色" prop="roleId">
            <el-select v-model="form.roleId" clearable placeholder="请选择角色" style="width:100%">
              <el-option v-for="role in roleOptions" :key="role.id" :label="role.name" :value="role.id"/>
            </el-select>
          </el-form-item>
        </el-col>

        <!-- 新增 3 个字段（选填） -->
        <el-col :span="12">
          <el-form-item label="挂号价格" prop="price">
            <el-input-number
                v-model="form.price"
                :precision="2"
                :min="0"
                :controls="false"
                placeholder="选填"
                style="width:100%"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="月薪" prop="salary">
            <el-input-number
                v-model="form.salary"
                :precision="2"
                :min="0"
                :controls="false"
                placeholder="选填"
                style="width:100%"/>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="简介" prop="profile">
            <el-input
                v-model="form.profile"
                type="textarea"
                :rows="3"
                maxlength="200"
                show-word-limit
                placeholder="选填，200字以内"/>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="状态" prop="status">
            <el-select v-model="form.status" style="width:100%">
              <el-option :value="1" label="在职"/>
              <el-option :value="0" label="离职"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入职时间" prop="startTime">
            <el-date-picker
                v-model="form.startTime"
                type="datetime"
                value-format="YYYY-MM-DD HH:mm:ss"
                placeholder="选择日期时间"
                style="width:100%"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="dialogVisible=false">取消</el-button>
      <el-button type="primary" @click="submitForm">确定</el-button>
    </template>
  </el-dialog>
</template>

<script>
import {ElMessage, ElMessageBox} from 'element-plus'
import {findStaff, listStaff, addStaff, updateStaff, delStaff} from '../api/staff.js'

export default {
  name: 'StaffView',
  data() {
    const validatePassword = (rule, value, callback) => {
      if (this.isAdd && !value) callback(new Error('请输入密码'))
      else if (this.isAdd && value && value.length < 6) callback(new Error('密码长度不能少于6位'))
      else if (!this.isAdd && value && value.length < 6) callback(new Error('密码长度不能少于6位'))
      else callback()
    }
    const validateConfirmPassword = (rule, value, callback) => {
      if (this.isAdd && !value) callback(new Error('请确认密码'))
      else if (this.isAdd && value !== this.form.password) callback(new Error('两次输入密码不一致'))
      else if (!this.isAdd && this.form.password && value !== this.form.password) callback(new Error('两次输入密码不一致'))
      else if (!this.isAdd && value && !this.form.password) callback(new Error('请先输入密码'))
      else callback()
    }
    return {
      queryParams: {name: '', deptName: '', roomName: ''},
      pagination: {pageNum: 1, pageSize: 10, total: 0},
      tableData: [],
      dialogVisible: false,
      dialogTitle: '',
      isAdd: true,
      form: {},
      allNameOpts: [],
      allDeptOpts: [],
      allRoomOpts: [],
      allTitleOpts: [],
      roleOptions: [
        { id: 1, name: '院长' },
        { id: 2, name: '门诊医生' },
        { id: 3, name: '住院医生' },
        { id: 4, name: '住院前台护士' },
        { id: 5, name: '住院护理护士' },
        { id: 6, name: '资源管理人员' },
        { id: 7, name: '药师' },
        { id: 8, name: '人事职员' }
      ],
      formRules: {
        staffNo: [{required: true, message: '请输入账号', trigger: 'blur'}],
        name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
        password: [{validator: validatePassword, trigger: 'blur'}],
        confirmPassword: [{validator: validateConfirmPassword, trigger: 'blur'}],
        phone: [{required: true, message: '请输入电话', trigger: 'blur'}],
        email: [{required: true, message: '请输入邮箱', trigger: 'blur'}, {
          type: 'email',
          message: '邮箱格式错误',
          trigger: 'blur'
        }],
        deptName: [{required: true, message: '请选择部门', trigger: 'change'}],
        title: [{required: true, message: '请选择职位', trigger: 'change'}],
        roleId: [{required: true, message: '请选择角色', trigger: 'change'}]
        // price、salary、profile 不校验 = 选填
      }
    }
  },
  mounted() {
    this.loadData()
    this.loadAllSelectOptions()
  },
  methods: {
    async loadData() {
      try {
        const api = this.queryParams.name || this.queryParams.deptName || this.queryParams.roomName ? listStaff : findStaff
        const {data: res} = await api({
          ...this.queryParams,
          pageNum: this.pagination.pageNum,
          pageSize: this.pagination.pageSize
        })
        if (res.code === 200) {
          this.tableData = res.obj.list || []
          this.pagination.total = res.obj.total
        } else {
          ElMessage.error(res.msg || '获取数据失败')
        }
      } catch (e) {
        ElMessage.error('加载数据失败')
      }
    },
    async loadAllSelectOptions() {
      try {
        const {data: res} = await findStaff({pageNum: 1, pageSize: 10000})
        if (res.code === 200) {
          const list = res.obj.list
          this.allNameOpts = [...new Set(list.map(i => i.name).filter(Boolean))].sort()
          this.allDeptOpts = [...new Set(list.map(i => i.deptName).filter(Boolean))].sort()
          this.allRoomOpts = [...new Set(list.map(i => i.roomName).filter(Boolean))].sort()
          this.allTitleOpts = [...new Set(list.map(i => i.title).filter(Boolean))].sort()
        }
      } catch (e) {
        console.error(e)
      }
    },
    handleQuery() {
      this.pagination.pageNum = 1
      this.loadData()
    },
    handleReset() {
      this.queryParams = {name: '', deptName: '', roomName: ''}
      this.pagination.pageNum = 1
      this.loadData()
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val
      this.loadData()
    },
    handleCurrentChange(val) {
      this.pagination.pageNum = val
      this.loadData()
    },
    handleAdd() {
      this.isAdd = true
      this.dialogTitle = '新增员工'
      this.form = {
        gender: 1,
        status: 1,
        staffNo: '',
        name: '',
        password: '',
        confirmPassword: '',
        phone: '',
        email: '',
        deptName: '',
        roomName: '',
        title: '',
        roleId: '',
        price: null,
        salary: null,
        profile: '',
        startTime: ''
      }
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.isAdd = false
      this.dialogTitle = '编辑员工'
      // 注意：编辑时需要设置部门名称和科室名称，而不是ID
      this.form = {
        ...row,
        deptName: row.deptName,
        roomName: row.roomName,
        roleId: this.getRoleIdByTitle(row.title),
        password: '',
        confirmPassword: ''
      }
      this.dialogVisible = true
    },
    handleDel(row) {
      ElMessageBox.confirm('确认删除该员工？', '提示', {type: 'warning'})
          .then(async () => {
            const {data: res} = await delStaff(row.id)
            if (res.code === 200) {
              ElMessage.success('删除成功')
              this.loadData()
              this.loadAllSelectOptions()
            } else {
              ElMessage.error(res.msg || '删除失败')
            }
          })
          .catch(() => {
          })
    },
    // 部门名称到ID的映射
    getDeptIdByName(deptName) {
      const deptMap = {
        '院办公室': 1,
        '人事部': 2,
        '门诊部': 3,
        '财务部': 4,
        '采购部': 5,
        '住院部': 6,
        // 根据实际情况添加更多部门映射
      }
      return deptMap[deptName] || 1 // 默认返回1
    },
    // 职位到角色ID的映射
    getRoleIdByTitle(title) {
      const roleMap = {
        '院长': 1,
        '门诊医生': 2,
        '住院医生': 3,
        '住院前台护士': 4,
        '住院护理护士': 5,
        '资源管理人员': 6,
        '药师': 7,
        '人事职员': 8
        // 根据实际情况添加更多职位映射
      }
      return roleMap[title] || 2 // 默认返回2
    },
    // 科室名称到ID的映射
    getRoomIdByName(roomName) {
      if (!roomName || roomName === '无' || roomName === '') {
        return null // 没有科室返回null
      }
      const roomMap = {
        '内科': 1,
        '外科': 2,
        '妇产科': 3,
        '儿科': 4,
        '五官科': 5
        // 根据实际情况添加更多科室映射
      }
      return roomMap[roomName] || null
    },
    async submitForm() {
      try {
        await this.$refs.formRef.validate()

        // 构建正确的提交数据
        const submitData = {
          // 复制表单中的基本字段
          ...this.form,

          // 设置必需的ID字段
          departmentId: this.getDeptIdByName(this.form.deptName),
          roleId: this.form.roleId,
          medicalRoomId: this.getRoomIdByName(this.form.roomName)
        }

        // 删除前端特有的字段，避免后端解析错误
        delete submitData.confirmPassword
        delete submitData.deptName
        delete submitData.roomName

        // 如果是编辑且没有修改密码，删除密码字段
        if (!this.isAdd && !this.form.password) {
          delete submitData.password
        }

        const api = this.isAdd ? addStaff : updateStaff
        const {data: res} = await api(submitData)
        if (res.code === 200) {
          ElMessage.success(this.isAdd ? '新增成功' : '修改成功')
          this.dialogVisible = false
          this.loadData()
          this.loadAllSelectOptions()
        } else {
          ElMessage.error(res.msg || '操作失败')
        }
      } catch (e) {
        console.error(e)
        ElMessage.error('提交失败，请检查数据')
      }
    }
  }
}
</script>

<style scoped>
.search-form {
  margin-bottom: 12px;
}

.pagination-container {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}
</style>






<!--<template>-->
<!--  <el-card>-->
<!--    &lt;!&ndash; 查询 &ndash;&gt;-->
<!--    <el-form :model="queryParams" inline label-width="80px" class="search-form">-->
<!--      <el-form-item label="姓名">-->
<!--        <el-select v-model="queryParams.name" clearable placeholder="请选择姓名" style="width: 150px">-->
<!--          <el-option label="全部" value=""/>-->
<!--          <el-option v-for="v in allNameOpts" :key="v" :label="v" :value="v"/>-->
<!--        </el-select>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="部门">-->
<!--        <el-select v-model="queryParams.deptName" clearable placeholder="请选择部门" style="width: 150px">-->
<!--          <el-option label="全部" value=""/>-->
<!--          <el-option v-for="v in allDeptOpts" :key="v" :label="v" :value="v"/>-->
<!--        </el-select>-->
<!--      </el-form-item>-->

<!--      <el-form-item label="科室">-->
<!--        <el-select v-model="queryParams.roomName" clearable placeholder="请选择科室" style="width: 150px">-->
<!--          <el-option label="全部" value=""/>-->
<!--          <el-option v-for="v in allRoomOpts" :key="v" :label="v" :value="v"/>-->
<!--        </el-select>-->
<!--      </el-form-item>-->

<!--      <el-form-item>-->
<!--        <el-button type="primary" @click="handleQuery">查询</el-button>-->
<!--        <el-button @click="handleReset">重置</el-button>-->
<!--        <el-button type="success" @click="handleAdd">新增员工</el-button>-->
<!--      </el-form-item>-->
<!--    </el-form>-->

<!--    &lt;!&ndash; 表格 &ndash;&gt;-->
<!--    <el-table :data="tableData" border stripe style="width: 100%; margin:12px 0">-->
<!--      <el-table-column prop="id" label="ID" width="60"/>-->
<!--      <el-table-column prop="staffNo" label="账号"/>-->
<!--      <el-table-column prop="name" label="姓名"/>-->
<!--      <el-table-column label="性别" width="60">-->
<!--        <template #default="{row}">{{ row.gender===1?'男':'女' }}</template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="phone" label="电话"/>-->
<!--      <el-table-column prop="email" label="邮箱"/>-->

<!--      &lt;!&ndash; 新增三列 &ndash;&gt;-->
<!--      <el-table-column prop="price" label="挂号价格" width="100">-->
<!--        <template #default="{row}">¥{{ row.price }}</template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="salary" label="月薪" width="100">-->
<!--        <template #default="{row}">¥{{ row.salary }}</template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="profile" label="简介" min-width="160" show-overflow-tooltip/>-->

<!--      <el-table-column prop="deptName" label="部门"/>-->
<!--      <el-table-column prop="roomName" label="科室">-->
<!--        <template #default="{row}">{{ row.roomName||'无' }}</template>-->
<!--      </el-table-column>-->
<!--      <el-table-column prop="title" label="职位"/>-->
<!--      <el-table-column label="状态" width="70">-->
<!--        <template #default="{row}">{{ row.status===1?'在职':'离职' }}</template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="入职时间" width="160">-->
<!--        <template #default="{row}">{{ row.startTime }}</template>-->
<!--      </el-table-column>-->
<!--      <el-table-column label="操作" width="150">-->
<!--        <template #default="{row}">-->
<!--          <el-button size="small" @click="handleEdit(row)">编辑</el-button>-->
<!--          <el-button size="small" type="danger" @click="handleDel(row)">删除</el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </el-table>-->

<!--    &lt;!&ndash; 分页 &ndash;&gt;-->
<!--    <el-pagination-->
<!--        background-->
<!--        layout="total, sizes, prev, pager, next, jumper"-->
<!--        :total="pagination.total"-->
<!--        :page-size="pagination.pageSize"-->
<!--        :current-page="pagination.pageNum"-->
<!--        :page-sizes="[5, 10, 20, 50]"-->
<!--        @size-change="handleSizeChange"-->
<!--        @current-change="handleCurrentChange"/>-->
<!--  </el-card>-->

<!--  &lt;!&ndash; 新增/编辑弹窗 &ndash;&gt;-->
<!--  <el-dialog :title="dialogTitle" v-model="dialogVisible" width="600px">-->
<!--    <el-form :model="form" ref="formRef" label-width="90px" :rules="formRules">-->
<!--      <el-row :gutter="12">-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="账号" prop="staffNo">-->
<!--            <el-input v-model="form.staffNo" placeholder="请输入账号"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="姓名" prop="name">-->
<!--            <el-input v-model="form.name" placeholder="请输入姓名"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->

<!--        &lt;!&ndash; 密码 &ndash;&gt;-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="密码" prop="password">-->
<!--            <el-input v-model="form.password" type="password" show-password-->
<!--                      :placeholder="isAdd ? '请输入密码' : '留空不修改'"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="确认密码" prop="confirmPassword">-->
<!--            <el-input v-model="form.confirmPassword" type="password" show-password-->
<!--                      :placeholder="isAdd ? '请确认密码' : '留空不修改'"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->

<!--        <el-col :span="12">-->
<!--          <el-form-item label="性别" prop="gender">-->
<!--            <el-radio-group v-model="form.gender">-->
<!--              <el-radio :label="1">男</el-radio>-->
<!--              <el-radio :label="2">女</el-radio>-->
<!--            </el-radio-group>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="电话" prop="phone">-->
<!--            <el-input v-model="form.phone" placeholder="请输入电话"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->

<!--        <el-col :span="12">-->
<!--          <el-form-item label="邮箱" prop="email">-->
<!--            <el-input v-model="form.email" placeholder="请输入邮箱"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="部门" prop="deptName">-->
<!--            <el-select v-model="form.deptName" clearable placeholder="请选择部门" style="width:100%">-->
<!--              <el-option v-for="v in allDeptOpts" :key="v" :label="v" :value="v"/>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->

<!--        <el-col :span="12">-->
<!--          <el-form-item label="科室" prop="roomName">-->
<!--            <el-select v-model="form.roomName" clearable placeholder="请选择科室" style="width:100%">-->
<!--              <el-option label="无" value=""/>-->
<!--              <el-option v-for="v in allRoomOpts" :key="v" :label="v" :value="v"/>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="职位" prop="title">-->
<!--            <el-select v-model="form.title" clearable placeholder="请选择职位" style="width:100%">-->
<!--              <el-option v-for="v in allTitleOpts" :key="v" :label="v" :value="v"/>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->

<!--        &lt;!&ndash; 新增 3 个字段（选填） &ndash;&gt;-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="挂号价格" prop="price">-->
<!--            <el-input-number-->
<!--                v-model="form.price"-->
<!--                :precision="2"-->
<!--                :min="0"-->
<!--                :controls="false"-->
<!--                placeholder="选填"-->
<!--                style="width:100%"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="月薪" prop="salary">-->
<!--            <el-input-number-->
<!--                v-model="form.salary"-->
<!--                :precision="2"-->
<!--                :min="0"-->
<!--                :controls="false"-->
<!--                placeholder="选填"-->
<!--                style="width:100%"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="24">-->
<!--          <el-form-item label="简介" prop="profile">-->
<!--            <el-input-->
<!--                v-model="form.profile"-->
<!--                type="textarea"-->
<!--                :rows="3"-->
<!--                maxlength="200"-->
<!--                show-word-limit-->
<!--                placeholder="选填，200字以内"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->

<!--        <el-col :span="12">-->
<!--          <el-form-item label="状态" prop="status">-->
<!--            <el-select v-model="form.status" style="width:100%">-->
<!--              <el-option :value="1" label="在职"/>-->
<!--              <el-option :value="0" label="离职"/>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--        <el-col :span="12">-->
<!--          <el-form-item label="入职时间" prop="startTime">-->
<!--            <el-date-picker-->
<!--                v-model="form.startTime"-->
<!--                type="datetime"-->
<!--                value-format="YYYY-MM-DD HH:mm:ss"-->
<!--                placeholder="选择日期时间"-->
<!--                style="width:100%"/>-->
<!--          </el-form-item>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </el-form>-->
<!--    <template #footer>-->
<!--      <el-button @click="dialogVisible=false">取消</el-button>-->
<!--      <el-button type="primary" @click="submitForm">确定</el-button>-->
<!--    </template>-->
<!--  </el-dialog>-->
<!--</template>-->

<!--<script>-->
<!--import {ElMessage, ElMessageBox} from 'element-plus'-->
<!--import {findStaff, listStaff, addStaff, updateStaff, delStaff} from '../api/staff.js'-->

<!--export default {-->
<!--  name: 'StaffView',-->
<!--  data() {-->
<!--    const validatePassword = (rule, value, callback) => {-->
<!--      if (this.isAdd && !value) callback(new Error('请输入密码'))-->
<!--      else if (this.isAdd && value && value.length < 6) callback(new Error('密码长度不能少于6位'))-->
<!--      else if (!this.isAdd && value && value.length < 6) callback(new Error('密码长度不能少于6位'))-->
<!--      else callback()-->
<!--    }-->
<!--    const validateConfirmPassword = (rule, value, callback) => {-->
<!--      if (this.isAdd && !value) callback(new Error('请确认密码'))-->
<!--      else if (this.isAdd && value !== this.form.password) callback(new Error('两次输入密码不一致'))-->
<!--      else if (!this.isAdd && this.form.password && value !== this.form.password) callback(new Error('两次输入密码不一致'))-->
<!--      else if (!this.isAdd && value && !this.form.password) callback(new Error('请先输入密码'))-->
<!--      else callback()-->
<!--    }-->
<!--    return {-->
<!--      queryParams: {name: '', deptName: '', roomName: ''},-->
<!--      pagination: {pageNum: 1, pageSize: 10, total: 0},-->
<!--      tableData: [],-->
<!--      dialogVisible: false,-->
<!--      dialogTitle: '',-->
<!--      isAdd: true,-->
<!--      form: {},-->
<!--      allNameOpts: [],-->
<!--      allDeptOpts: [],-->
<!--      allRoomOpts: [],-->
<!--      allTitleOpts: [],-->
<!--      formRules: {-->
<!--        staffNo: [{required: true, message: '请输入账号', trigger: 'blur'}],-->
<!--        name: [{required: true, message: '请输入姓名', trigger: 'blur'}],-->
<!--        password: [{validator: validatePassword, trigger: 'blur'}],-->
<!--        confirmPassword: [{validator: validateConfirmPassword, trigger: 'blur'}],-->
<!--        phone: [{required: true, message: '请输入电话', trigger: 'blur'}],-->
<!--        email: [{required: true, message: '请输入邮箱', trigger: 'blur'}, {-->
<!--          type: 'email',-->
<!--          message: '邮箱格式错误',-->
<!--          trigger: 'blur'-->
<!--        }],-->
<!--        deptName: [{required: true, message: '请选择部门', trigger: 'change'}],-->
<!--        title: [{required: true, message: '请选择职位', trigger: 'change'}]-->
<!--        // price、salary、profile 不校验 = 选填-->
<!--      }-->
<!--    }-->
<!--  },-->
<!--  mounted() {-->
<!--    this.loadData()-->
<!--    this.loadAllSelectOptions()-->
<!--  },-->
<!--  methods: {-->
<!--    async loadData() {-->
<!--      try {-->
<!--        const api = this.queryParams.name || this.queryParams.deptName || this.queryParams.roomName ? listStaff : findStaff-->
<!--        const {data: res} = await api({-->
<!--          ...this.queryParams,-->
<!--          pageNum: this.pagination.pageNum,-->
<!--          pageSize: this.pagination.pageSize-->
<!--        })-->
<!--        if (res.code === 200) {-->
<!--          this.tableData = res.obj.list || []-->
<!--          this.pagination.total = res.obj.total-->
<!--        } else {-->
<!--          ElMessage.error(res.msg || '获取数据失败')-->
<!--        }-->
<!--      } catch (e) {-->
<!--        ElMessage.error('加载数据失败')-->
<!--      }-->
<!--    },-->
<!--    async loadAllSelectOptions() {-->
<!--      try {-->
<!--        const {data: res} = await findStaff({pageNum: 1, pageSize: 10000})-->
<!--        if (res.code === 200) {-->
<!--          const list = res.obj.list-->
<!--          this.allNameOpts = [...new Set(list.map(i => i.name).filter(Boolean))].sort()-->
<!--          this.allDeptOpts = [...new Set(list.map(i => i.deptName).filter(Boolean))].sort()-->
<!--          this.allRoomOpts = [...new Set(list.map(i => i.roomName).filter(Boolean))].sort()-->
<!--          this.allTitleOpts = [...new Set(list.map(i => i.title).filter(Boolean))].sort()-->
<!--        }-->
<!--      } catch (e) {-->
<!--        console.error(e)-->
<!--      }-->
<!--    },-->
<!--    handleQuery() {-->
<!--      this.pagination.pageNum = 1-->
<!--      this.loadData()-->
<!--    },-->
<!--    handleReset() {-->
<!--      this.queryParams = {name: '', deptName: '', roomName: ''}-->
<!--      this.pagination.pageNum = 1-->
<!--      this.loadData()-->
<!--    },-->
<!--    handleSizeChange(val) {-->
<!--      this.pagination.pageSize = val-->
<!--      this.loadData()-->
<!--    },-->
<!--    handleCurrentChange(val) {-->
<!--      this.pagination.pageNum = val-->
<!--      this.loadData()-->
<!--    },-->
<!--    handleAdd() {-->
<!--      this.isAdd = true-->
<!--      this.dialogTitle = '新增员工'-->
<!--      this.form = {-->
<!--        gender: 1,-->
<!--        status: 1,-->
<!--        staffNo: '',-->
<!--        name: '',-->
<!--        password: '',-->
<!--        confirmPassword: '',-->
<!--        phone: '',-->
<!--        email: '',-->
<!--        deptName: '',-->
<!--        roomName: '',-->
<!--        title: '',-->
<!--        price: null,-->
<!--        salary: null,-->
<!--        profile: '',-->
<!--        startTime: ''-->
<!--      }-->
<!--      this.dialogVisible = true-->
<!--    },-->
<!--    handleEdit(row) {-->
<!--      this.isAdd = false-->
<!--      this.dialogTitle = '编辑员工'-->
<!--      this.form = {...row, password: '', confirmPassword: ''}-->
<!--      this.dialogVisible = true-->
<!--    },-->
<!--    handleDel(row) {-->
<!--      ElMessageBox.confirm('确认删除该员工？', '提示', {type: 'warning'})-->
<!--          .then(async () => {-->
<!--            const {data: res} = await delStaff(row.id)-->
<!--            if (res.code === 200) {-->
<!--              ElMessage.success('删除成功')-->
<!--              this.loadData()-->
<!--              this.loadAllSelectOptions()-->
<!--            } else {-->
<!--              ElMessage.error(res.msg || '删除失败')-->
<!--            }-->
<!--          })-->
<!--          .catch(() => {-->
<!--          })-->
<!--    },-->
<!--    async submitForm() {-->
<!--      try {-->
<!--        await this.$refs.formRef.validate()-->
<!--        const submitData = {...this.form}-->
<!--        if (!this.isAdd && !submitData.password) {-->
<!--          delete submitData.password-->
<!--          delete submitData.confirmPassword-->
<!--        }-->
<!--        const api = this.isAdd ? addStaff : updateStaff-->
<!--        const {data: res} = await api(submitData)-->
<!--        if (res.code === 200) {-->
<!--          ElMessage.success(this.isAdd ? '新增成功' : '修改成功')-->
<!--          this.dialogVisible = false-->
<!--          this.loadData()-->
<!--          this.loadAllSelectOptions()-->
<!--        } else {-->
<!--          ElMessage.error(res.msg || '操作失败')-->
<!--        }-->
<!--      } catch (e) {-->
<!--        console.error(e)-->
<!--      }-->
<!--    }-->
<!--  }-->
<!--}-->
<!--</script>-->

<!--<style scoped>-->
<!--.search-form {-->
<!--  margin-bottom: 12px;-->
<!--}-->

<!--.pagination-container {-->
<!--  margin-top: 12px;-->
<!--  display: flex;-->
<!--  justify-content: flex-end;-->
<!--}-->
<!--</style>-->